	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>

	<body>
		<div>
			<div>请选择您的服务器</div>
			<div>
				<select>
					<optgroup label="青龙乱舞">
						<option value="1">长生剑</option>
						<option value="2">孔雀翎</option>
						<option value="3">吹雪</option>
					</optgroup>
					<optgroup label="大地飞鹰">
						<option value="1">凤凰集</option>
						<option value="2">彼岸花</option>
						<option value="3">千秋月</option>
					</optgroup>
					<optgroup label="云上之城">
						<option value="1">长生殿</option>
						<option value="2">紫霞居</option>
						<option value="3">红尘屿</option>
					</optgroup>
					<optgroup label="沧海云帆">
						<option value="1">青龙永夜</option>
						<option value="2">锦鲤抄</option>
						<option value="3">凤凰集</option>
					</optgroup>
					<optgroup label="把酒邀月">
						<option value="1">云水在天</option>
						<option value="2">指月临风</option>
					</optgroup>
					<optgroup label="边城浪子">
						<option value="1">欢乐英雄</option>
					</optgroup>
				</select>
			</div>
			<div>请输入您的ID</div>
			<div><input type="text" id="yourID"  maxlength=7 placeholder=""></div>
			<div>请输入您的功力</div>
			<div><input type="gongli" id="gongli" onchange="if (!(/^\d+.?\d*$/.test(this.value))){alert('您输入的格式不正确,请重新输入！')
					;this.value='';}"></div>

			<br>
			<div>
				<input type="submit" id="gongli" onclick="checkform()" value="一键查询功力" />
			</div>
		</div>
	</body>
	<script>
		function checkform() {
			if (document.getElementById('gongli').value.length == 0) {
				alert('输入为空！');
				document.getElementById('gongli').focus();
				return false;
			} else(alert(('查询成功！\n您的功力为: ') + document.getElementById('gongli').value))
		}
	</script>

	</html>